<template>
  <div>
    <!-- 标题 -->
    <div class="headers">
      <h2 class="header-m">购物车</h2>
    </div>
    <div class="header">
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">48小时快速退款</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">满88元免邮费</span>
        </div>
      </div>
    <!-- 商品展示 -->
    <div class="cart">
      <van-swipe-cell class="cart-I" v-for="item in goodList" :key="item.id">
        <div class="cartItem">
          <input type="checkbox" v-model="item.checked" class="checkbox" />
          <!-- <img src="../../assets/ava.png" alt=""> -->
          <div class="cart-m">
            <div class="img-txt">
              <img class="img" :src="item.list_pic_url" alt="" />
              <div class="cart-txt">
                <span class="txt-t">{{ item.goods_name }}</span>
                <span class="txt-b">${{ item.retail_price }}</span>
              </div>
            </div>
          </div>
          <van-stepper
            :name="item.goods_id"
            @plus="add(item.goods_id)"
            @minus="desc(item.goods_id)"
            v-model="item.number"
          />
        </div>
        <!-- 右侧删除 -->
        <template #right>
          <van-button
            square
            type="danger"
            @click="dele(item.id)"
            text="删除"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="check">全选<input type="checkbox" v-model="allCheck" /></div>
      <div>
        合计<span>${{ total }}</span>
        <button @click="toOrder">下单</button>
      </div>
    </div>
  </div>
</template>

<script>
import { addCart } from "@/api/cart";

import { Toast } from "vant";
import { cartList, submitAction, deleteAction } from "@/api/cart";
export default {
  name: "cart",
  data() {
    return {
      goodList: [],
    };
  },

  computed: {
    allCheck: {
      get() {
        if (this.goodList.length == 0) {
          return false;
        }
        return this.goodList.every((el) => el.checked == true);
      },
      set(val) {
        return this.goodList.map((el) => (el.checked = val));
      },
    },
    //总价
    total() {
      return this.goodList
        .filter((el) => el.checked)
        .reduce((pre, current) => {
          return pre + current.number * current.retail_price;
        }, 0);
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化,给数据增添checked属性
    init() {
      cartList({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].checked = false;
        }
        this.goodList = res.data;
      });
    },
    //下单
    async toOrder() {
      let a = this.goodList.filter((el) => el.checked);
      //  console.log(a);
      console.log(this.goodList, a);
      // 判断复选框是否选中
      if (a.length > 0) {
        let a = await submitAction({
          openId: localStorage.getItem("openId"),
          allPrise: this.total,
          goodsId: this.goodList
            .filter((el) => el.checked)
            .map((el) => {
              return el.goods_id;
            })
            .join(","),
        });
        console.log(a);
        this.$router.push("cart/order");
      } else {
        Toast.fail("请勾选");
      }
    },
    // 点击加减只传正负一,调用接口改变后台数据
    add(id){
      addCart({
          goodsId: id,
          number: 1,
          openId: localStorage.getItem("openId")
        }).then(res=>{
        console.log(res);

        });
    },
    desc(id){
      addCart({
          goodsId:id,
          number: -1,
          openId: localStorage.getItem("openId")
        }).then(res=>{
        console.log(res);

        });
    },
   //删除
    dele(id) {
      this.id = id;
      deleteAction({
        id: this.id,
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>>

